<template>
 <div>
    <div class="title">
        周末去哪玩
    </div>
      <div>
        <div class="item" v-for="item of weekList" :key="item.id">
          <div class="item-warpper">
            <img class="item-img item-img-read" :src="item.imgUrl"/>
          </div>
            <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
            </div>

        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekPlay',
  data () {
    return {
      weekList: [{
        id: '001',
        imgUrl: 'http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg',
        title: '成都必游Top10',
        desc: '成都的标志，也是现代人对老成都的记忆'
      }, {
        id: '002',
        imgUrl: 'http://img1.qunarzz.com/sight/source/1507/a0/7087c85d439e4.jpg_r_640x214_4cd56a30.jpg',
        title: '远离烧烤模式',
        desc: '周末还在搓麻将？快出门赏美景'
      }, {
        id: '003',
        imgUrl: 'http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg',
        title: '慢游成都最美古镇',
        desc: '撷取一份悠闲，寻觅散落在时光里的幸福'
      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
  .title
    margin-top:  .2rem
    line-height: .8rem
    background: #eee
    text-indent: 0.2rem
  .item
    position: relative
    margin-bottom: .1rem
    background: #fff
    .item-warpper
      overflow:hidden
      height:0;
      padding-bottom:37.09%
      .item-img
       width 100%
      .item-img-read
        background: none !important
    .item-info
      position: relative
      padding: .14rem .2rem .2rem .2rem
      .item-title
        overflow: hidden
        padding-right: 1.4rem
        color: #212121
        font-size: .28rem
        line-height: .48rem
        white-space: nowrap
        text-overflow: ellipsis
      .item-desc
        overflow: hidden
        padding-right: 1.4rem
        color: #616161
        font-size: .24rem
        line-height: .42rem
        white-space: nowrap
        text-overflow: ellipsis

</style>
